<template>
  <a-modal :width="800" title="选择仓库" zIndex="9999" v-model="visible" :destroyOnClose="true" :footer="null">
    <div style="margin-bottom: 10px">
      <a-input-search
        placeholder="输入昵称搜索"
        v-model="name"
        allowClear
        enter-button
        @search="$refs.table.refresh(true)"
      />
    </div>
    <s-table ref="table" rowKey="id" :columns="manager" :data="loadData">
      <span slot="baseinfo" slot-scope="text, record">
        <span :length="20" tooltip>{{ record.name }}</span>
      </span>
      <span slot="address" slot-scope="text, record">
        <!-- <a-tooltip>
          <template slot="title"> {{ getAddrName(record) + text }} </template>
          {{ getAddrName(record) + text }}
        </a-tooltip> -->
        {{ record.address }}
      </span>
      <span slot="action" slot-scope="text, record">
        <a-button type="primary" size="small" @click="onSelect(record)"> 选择 </a-button>
      </span>
    </s-table>
  </a-modal>
</template>

<script>
import { address } from '@/api/components/address'
import { list } from '@/api/warehouse.js'
import { STable } from '@/components'

const manager = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '仓库名称',
    dataIndex: 'name',
  },
  {
    title: '地址',
    scopedSlots: { customRender: 'address' },
    width: 350,
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' },
    width: 100,
  },
]
export default {
  components: {
    STable,
  },

  data() {
    return {
      visible: false,
      name: '',
      manager,
      // 选择用户数据加载
      loadData: (parameter) => {
        return list({
          ...parameter,
          // ...params,
          // type: 'admin',
          // storeId: storage.get('storeId'),
          name: this.name,
        }).then((res) => {
          if (res.data && res.data.list) {
            res.data.data = res.data.list
          }

          return res.data
        })
      },

      addressList: [],
    }
  },
  created() {
    address().then((res) => {
      this.addressList = res.data.list
    })
  },
  computed: {
    getAddrName() {
      return (item) => {
        let str = ''
        if (item.area && item.area.city_id && this.addressList.length) {
          let { city_id, district_id, province_id } = item.area,
            { addressList } = this,
            province = addressList.find((el) => el.id === province_id),
            city = province.cityAll.find((el) => el.id === city_id),
            district = city.districtAll.find((el) => el.id === district_id)

          if (province) {
            str += province.name
          }

          if (city) {
            str += city.name
          }

          if (district) {
            str += district.name || ''
          }
        }
        return str + (item.address || '')
      }
    },
  },

  methods: {
    onSelect(e) {
      this.visible = false
      this.$emit('select', e)
    },
  },
}
</script>
<style lang="less" scoped></style>
